<template>
<div style="display: inline-block;">
  <slot v-bind:on="toggle">
    <v-btn
      v-bind="$attrs"
      color="indigo"
      outlined
      @click.stop="toggle"
      v-on="$listeners">
      选择酒店
    </v-btn>
  </slot>
  <SearchSelect v-bind="$attrs" :show.sync="dialog" api="/admin/factordata/hotel/search" title="选择酒店" width="1180" persistent :params="{status: 1}" :showPagination="!step">
    <template v-slot="{ queryParams, loading, tableData, search }">
      <template v-if="!step">
        <v-container class="py-0">
          <v-row>
            <v-col cols="3">
              <dict-select 
                type="city" 
                outlined
                hide-details
                dense
                clearable
                label="所在城市"
                v-model="queryParams.city_id"
                @change="search(1)">
              </dict-select>
            </v-col>
            <v-col cols="4">
              <v-text-field
                v-model.trim="queryParams.keyword"
                label="搜索酒店名称"
                outlined
                clearable
                hide-details
                dense
                @keyup.enter.native="search(1)">
              </v-text-field>
            </v-col>
            <v-col>
              <v-btn color="info" @click="search(1)">{{ $t('actions.search') }}</v-btn>
            </v-col>
          </v-row>
        </v-container>
        <v-divider />
        <el-table
          :data="tableData"
          v-loading="loading"
          border
          @current-change="handleCurrentChange"
          style="width: 100%">
          <el-table-column
            type="index"
            align="center"
            width="60">
          </el-table-column>
          <el-table-column
            prop="city_name"
            label="所在城市"
            width="180">
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            prop="name"
            label="酒店名称"
            min-width="180">
          </el-table-column>
          <!-- <el-table-column
            prop="foundation_prodcut_name"
            label="余款"
            width="180">
          </el-table-column>
          <el-table-column
            prop="foundation_prodcut_name"
            label="过期时间"
            width="180">
          </el-table-column> -->
          <el-table-column
            prop="hotel_type_name"
            label="酒店类别"
            width="140">
          </el-table-column>
          <el-table-column
            prop="level"
            label="酒店级别"
            width="140">
          </el-table-column>
        </el-table>
      </template>
      <template v-else>
        <v-form ref="form" :lazy-validation="false">
          <el-table
            :data="rooms"
            border>
            <el-table-column
              prop="type"
              label="房型"
              width="160">
              <template slot-scope="{ row }">
                <span>{{row.type}}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="入住日期"
              width="240">
              <template slot="header">
                <span class="mr-1">入住日期</span>
                <small class="red--text">({{$t('other.required')}})</small>
              </template>
              <template slot-scope="{ row }">
                <el-date-picker v-model="row.start_date" :clearable="false" value-format="yyyy-MM-dd" style="width: 100%"
                  :picker-options="{
                    disabledDate: (date) => {
                      if(row.end_date) {
                        return dayjs(date).diff(row.end_date) > -86400000
                      }
                      return false
                    }
                  }"
                  type="date" @change="inputChangeDate(row)">
                </el-date-picker>
              </template>
            </el-table-column>
            <el-table-column
              label="退房日期"
              width="240">
              <template slot="header">
                <span class="mr-1">退房日期</span>
                <small class="red--text">({{$t('other.required')}})</small>
              </template>
              <template slot-scope="{ row }">
                <el-date-picker v-model="row.end_date" :clearable="false" value-format="yyyy-MM-dd" style="width: 100%"
                  :picker-options="{
                    disabledDate: (date) => {
                      if(row.start_date) {
                        return dayjs(date).diff(row.start_date) < 1
                      }
                      return false
                    }
                  }"
                  type="date" @change="inputChangeDate(row)">
                </el-date-picker>
              </template>
            </el-table-column>
            <el-table-column
              label="数量"
              width="160">
              <template slot-scope="{ row }">
                <v-text-field v-model.number="row.quantity" type="number" hide-details dense outlined></v-text-field>
              </template>
            </el-table-column>
            <el-table-column
              label="晚数"
              width="160">
              <template slot="header">
                <span class="mr-1">晚数</span>
                <small class="red--text">({{$t('other.required')}})</small>
              </template>
              <template slot-scope="{ row }">
                <v-text-field 
                  v-model="row.nights"
                  hide-details 
                  dense 
                  outlined
                  type="number"
                  readonly
                  :rules="[rules.required]"
                  required>
                </v-text-field>
              </template>
            </el-table-column>
            <el-table-column
              prop="price"
              label="成本单价"
              min-width="140">
            </el-table-column>
          </el-table>
        </v-form>
      </template>
    </template>
    <template v-slot:footer>
      <v-spacer></v-spacer>
      <v-btn @click="cancel">{{ step ? '返回上级' : $t('actions.cancel') }}</v-btn>
      <v-btn color="primary" :disabled="!step" @click="save">确定</v-btn>
    </template>
  </SearchSelect>
</div>
</template>

<script>
import SearchSelect from '@/components/search-select'
import dayjs from 'dayjs'
export default {
  components: {
    SearchSelect
  },
  data() {
    return {
      step: 0,
      dialog: false,
      selection: '',
      rooms: [{
        hotel_id: undefined,
        hotel_name: '',
        type: '大床房',
        start_date: '',
        end_date: '',
        quantity: '',
        nights: '',
        price: 200
      }],

      rules: {
        required: value => !!value || 'required',
      },
    }
  },
  methods: {
    dayjs,
    toggle() {
      this.step = 0
      this.selection = ''
      this.dialog = !this.dialog
    },
    handleCurrentChange(row) {
      if(row) {
        this.selection = row
        this.step = 1
      }
    },
    cancel() {
      if (!this.step) {
        this.dialog = false
      }
      this.step = 0
    },
    save() {
      if(this.$refs.form.validate()) {
        this.$emit('change', this.rooms.map(item => {
          return {
            ...item,
            hotel_id: this.selection.id,
            hotel_name: this.selection.name,
          }
        }))
        this.dialog = false
      }
    },
    inputChangeDate(row) {
      if(row.start_date && row.end_date) {
        row.nights = dayjs(row.end_date).diff(row.start_date) / 86400000
      }
    }
  }
}
</script>

<style>
  .form-item-border {
    outline: 1px solid #dcdee0;
    background: #fff;
    min-height: 70px;
  }
</style>